<!-- 
  模板部分：
  Vue组件的模板用于定义组件的结构和渲染内容
  {{ message }} 是Vue的文本插值语法，用于将script中定义的message变量值渲染到页面上
  当message的值发生变化时，页面会自动更新显示最新值（响应式特性）
-->
<template>
    {{ message }}
</template>

<!-- 
  脚本部分：
  <script setup> 是Vue 3引入的语法糖，用于简化组件的逻辑编写
  在此语法下，声明的变量和函数会自动暴露给模板使用，无需显式返回
-->
<script setup>
// 声明响应式变量message并初始化
// 使用let关键字而不是const，因为后续需要修改该变量的值
// 注意：在Vue 3的<script setup>中，直接声明的变量默认具有响应式特性
let message = '不积跬步无以至千里'

// 使用setTimeout设置一个延迟执行的函数，延迟时间为2000毫秒（2秒）
// 该函数的作用是在2秒后更新message的值，演示响应式更新
setTimeout(() => {
    // 打印更新前的message值，用于调试查看变量状态
    console.log('更新前的message', message)
    
    // 修改message的值
    // 当message值改变时，Vue会自动检测到变化并更新模板中的显示
    message = "长风破浪会有时，直挂云帆济沧海"
    
    // 打印更新后的message值，确认变量已成功修改
    console.log('更新后的message', message)
}, 2000)
</script>